<template>
  <div class="login-container" :style="{ backgroundImage: 'url(' + leftBackgroundImage + ')' , backgroundSize: '100% 100%'}">
    <div class="login-left" >

      <h1 style="text-align: center; margin-top: 150px"><el-icon class="custom-icon"><LocationFilled /></el-icon>欢迎使用五组医疗</h1>
    </div>
    <div class="login-right" >
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" >
        <el-tab-pane label="登录" name="first">
          <el-form ref="loginForm" :model="form" :rules="rules" class="login-form">

            <el-form-item prop="name">
              <el-input v-model="form.name" placeholder="用户名" style="height: 60px"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" type="password" placeholder="密码" style="height: 60px"></el-input>
            </el-form-item>
            <el-form-item prop="hint">
              <el-checkbox >已阅读并同意五组医疗账号 <a href="#">用户协议</a>和 <a href="#">隐私政策</a></el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleLogin" style="width: 400px;height: 60px">登录</el-button>
            </el-form-item>
            <el-form-item prop="other">
              <a href="#" style="text-align: left">忘记密码？</a>
              <a href="#" style="margin-left: 260px">手机号登录</a>
            </el-form-item>
          </el-form>
        </el-tab-pane>
       
        <el-tab-pane label="注册" name="second">
          <el-form ref="loginForm" :model="form" :rules="rules" class="login-form">

            <el-form-item prop="username">
              <el-input v-model="form.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input v-model="form.password" type="password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleLogin" style="margin-left: 350px">确定</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>

      </el-tabs>
      <!-- <el-button @click="cc()">demo</el-button> -->


    </div>
  </div>
</template>

<script>
import axios from 'axios';



export default {
  data() {
    return {
      activeName: 'first',
      form: {},
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      leftBackgroundImage: 'https://img3.redocn.com/20120503/Redocn_2012050302514795.jpg'
    };
  },
  methods: {

    // cc(){
    //   axios.post("user/cc").then(res=>{
    //       console.log(res.data+"CCCCCCCCCCCCCCCCCCCCCCCCCCCCC")
    //   })
    // },
    handleLogin() {
     axios.post("user/login",this.form).then(res => {
      if(res.data.code === 201){
        this.$message({
          type: 'error',
          message: res.data.data
          });
      }else{

          const mm = res.data.data;
          console.log(JSON.stringify(mm)+"MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM")
          const token = mm.token;
          localStorage.setItem('token', token);

        this.$emit('login-success'); // 触发事件
      }
      
     })
    },
    submitForm() {

      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // 提交表单逻辑
          console.log('提交表单:', this.form);
          ElMessage.success('登录成功！');
        } else {
          console.log('错误提交!!');
          return false;
        }
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }

  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  height: 100vh; /* 占满整个视口高度 */
}

.login-left {
  width: 50%;
  background-size: cover;
  background-position: center;
}

.login-right {
  width: 50%;
  padding: 40px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-form {
  width: 100%;
  max-width: 400px;
  margin-left: 100px;
  margin-top: 110px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
  color: #27434d;
}
.custom-icon {
  font-size: 50px; /* 调整图标大小 */
  margin-left: 30px;
  color: #1ce506;
}
/* styles.css */
.demo-tabs {
  background-image: linear-gradient(to right, #6eff66, #66ccff);
  width: 600px;
  height: 600px;
}
</style>
